<template>
  <div style="margin-top:10px">
    <!-- 操作按钮区域 -->
    <div :md="24" :sm="24" class="table-operator">
      <a-button icon="plus" type="primary" @click="handleAdd">新增</a-button>
      <a-button v-if="selectedRowKeys.length === 1" icon="edit" type="" @click="handleEdit">编辑</a-button>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="false"
        :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        bordered
        rowKey="id"
        size="middle"
        @change=""
      >
      </a-table>
    </div>
    <!-- table区域-end -->
    <func-drawer ref="funcDrawer" :deviceModelId="deviceModelId" @ok="modalFormOk"></func-drawer>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import FuncDrawer from './FuncDrawer'

const columns = [
  {
    title: '#',
    dataIndex: '',
    key: 'rowIndex',
    width: 40,
    align: 'center',
    customRender: function(t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '标识',
    dataIndex: 'code',
    align: 'center'
  },
  {
    title: '功能',
    dataIndex: 'name',
    align: 'center'
  },
  {
    title: '操作类型',
    dataIndex: 'type',
    align: 'center',
    customRender: function(t, r, index) {
      if (t === 'found') {
        return '前端操作'
      } else if (t === 'request') {
        return '后台请求'
      } else {
        return '自动执行'
      }
    }
  },
  {
    title: '是否同步',
    dataIndex: 'isSync',
    align: 'center',
    customRender: function(t, r, index) {
      if (t) {
        return '同步'
      } else {
        return '异步'
      }
    }
  }
]
export default {
  name: 'FuncList',
  mixins: [JeecgListMixin],
  components: {
    FuncDrawer
  },
  props: ['deviceModelId'],
  data() {
    return {
      loading: false,
      columns: columns,
      dataSource: [],
      url: {
        list: '/device/model/queryFunctionByModelId',
        getAttributeById: '/device/model/getAttributeById',
        deleteBatch: '/device/model/func/deleteBatch'
      }
    }
  },
  created() {
    this.onClearSelected()
  },
  methods: {
    handleAdd() {
      this.$refs.funcDrawer.title = '添加功能定义'
      this.$refs.funcDrawer.add(this.deviceModelId)
    },
    handleEdit() {
      let funcId = this.selectedRowKeys[0]
      this.$refs.funcDrawer.title = '编辑功能定义'
      getAction(this.url.getAttributeById, { id: funcId, aName: 'func' }).then(res => {
        if (res.success) {
          this.$refs.funcDrawer.edit(res.result)
        }
      })
    },
    modalFormOk(){
      this.loadData()
    },
    loadData() {
      let that = this
      getAction(this.url.list, { id: this.deviceModelId }).then(res => {
        if (res.success) {
          that.dataSource = res.result || []
        } else {
          that.dataSource = []
        }
      })
    },
    getOrderMain(orderId) {
      this.deviceModelId = orderId
      this.loadData()
    }
  }
}
</script>

<style scoped></style>
